<template>
  <div class="account-module">
    <div class="register" :style="{ background: 'url(' + bgImg + ') center  top', backgroundSize: '100% auto', 'min-height':'800px' }">
      <div class="header">
        <div class="left">
          <img class="min"  src="@/assets/logo_min.png" />
          <div class="title">全国青少年无人机大赛 | 用户管理中心</div>
        </div>
        <img class="logo" src="@/assets/r-logo.png" />
      </div>
      <div class="c">
        <div class="content">
          <div class="header_title">大赛证书查询平台</div>
          <div v-if="tableData.list.length>0" style="float: left;text-align: left; margin-bottom: 16px;">
            <img :src="tableData.list[0].header" width="100" height="140"/>
            <div class="title">{{tableData.list[0].userName}}</div>
            <div class="title">{{tableData.list[0].company}}</div>
          </div>


          <div class="global-table">
            <el-table
                :data="tableData.list"
                :header-cell-style="{
              background: '#F5F7FA',
              color: '#333',
          }"
                style="width: 100%"
            >
              <el-table-column prop="matchName" label="赛事名称" width="220">
                <template #default="scope">
                  {{scope.row.matchName}}
                </template>
              </el-table-column>
              <el-table-column prop="itemName" label="赛项" width="200">
                <template #default="scope">
                  {{scope.row.itemName}}（{{scope.row.groupName}}）
                </template>
              </el-table-column>
              <el-table-column prop="matchLevel" label="层级" width="80">
                <template #default="scope">
                  {{scope.row.matchLevel ==1 ? '国赛': '省赛'}}
                </template>
              </el-table-column>
              <el-table-column prop="score" label="奖项" width="120"/>
              <el-table-column prop="teacher" label="指导老师" width="140"/>
              <el-table-column prop="certificate" label="证书编号" />
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <span class="table-text-btn" v-if="scope.row.url" @click="viewUrl(scope.row.url)">查看</span>
                  <span class="table-text-btn" v-if="scope.row.url" @click="downLoadFile(scope.row.url, realName + '-' + scope.row.certificate+'.png')">下载</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <el-row class="global-pagination">
            <el-col :span="8" class="total"> 共搜索 {{tableData.list.length}} 条数据 </el-col>
          </el-row>
        </div>
        <div class="btns">
          <div class="btn back" @click="back">返回</div>
        </div>

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import {useRoute} from "vue-router";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import app from "@/constants/app";
import {getCache} from "@/utils/cache";
import router from "@/router";
const route = useRoute();

const tableData = reactive({
  list: []
});

const showViewUrlFlag = ref(false);


const certificateJson = getCache('certificate', { isSessionStorage: true }, {});
const realName = certificateJson.realName;
const idCard = certificateJson.idCard;
const certificate = certificateJson.certificate;

//查看证书
const viewUrl = (url: string) => {
  window.open(url);
};

// 查询证书
const queryCertificateBy = () => {
  baseService
      .post("/front/spuser/queryCertificateBy", {realName, idCard, certificate})
      .then((res) => {
            if (res.code === 0) {
              tableData.list = res.data;
            } else {
              ElMessage.error(res.msg);
            }
          }
      );
};

const downLoadFile = (url: string, name: string) => {
  let a = document.createElement('a');
  let evt = document.createEvent('MouseEvents');
  a.download = '晋级列表';
  a.href = app.api+"/front/download?imageUrl="+ url +"&fileName=" + name;
  evt.initEvent('click',true,true);
  a.dispatchEvent(evt);
  window.URL.revokeObjectURL(a.href);
}

const back =() => {
  router.push("/certificate");
}

queryCertificateBy();




</script>
<style lang="scss" scoped>
@import "account/account.scss";
</style>

<style lang="scss" scoped>

.account-module {
  height: 900px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  .c {
    width: 1136px;
    height: 823px;

    background: #ffffff;
    border-radius: 12px;

    .content {
      padding: 20px 24px;
    }
    .header_title{
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 25px;
    }
    .title {
      /*display: flex;*/
      align-items: center;
      font-size: 16px;
      font-weight: $font-weight-bold;

      span {
        width: 4px;
        height: 12px;
        background: #00a0e9;
        margin-right: 7px;
      }
    }
    .avatar{

      width: 38px;
      height: 38px;
      display: block;
      margin:auto;
    }
    .global-pagination{
      padding: 0px;
      text-align: center;
    }
  }
}
</style>
<style lang="scss">
.ruleForm {
  .el-form-item--default .el-form-item__label {
    font-weight: $font-weight-bold;
  }
}

.btns{
  text-align: center;
}
.back{
  width: 20%;
  line-height: 50px;
  background: #00A0E9;
  border-radius: 8px;
  color: #FFFFFF;
  text-align: center;
  font-size: 16px;
  margin-left: 40%;
}

</style>
